<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>视频直播列表</title>
    <!--初始化默认样式-->
    <link rel="stylesheet" href="css/reset.css">
    <!--页面公共样式，包含头部、尾部等-->
    <link rel="stylesheet" href="css/common.css">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <script src="js/flexible.js"></script>
    <!-- ie兼容es6 -->
    <script src="js/browser.min.js"></script>
    <script src="js/polyfill.min.js"></script>
    <!-- ie兼容es6结束 -->
    <link rel="stylesheet" href="css/livingList.css">
</head>

<body>
    <div id="app" v-cloak>

        <!--头部-->
        <my-header></my-header>
        <!--头部结束-->

        <!--内容区-->
        <div class="cnt">
            <div class="main">
                <!-- 页面地址导航 -->
                <div class="cntpage">
                    <li class="cntpageli">首页</li>/<li class="cntpageli">直播</li>
                </div>
                <!-- 课程按直播方式筛选 -->
                <div class="cnttop">
                    <li class="cnttopli font20"
                        :class="{liactive:currentType=='living'}"
                        @click="changeCurrentTab('living')">
                        正在直播
                    </li>
                    <li class="cnttopli font20"
                        :class="{liactive:currentType=='willLive'}"
                        @click="changeCurrentTab('willLive')">
                        即将直播
                    </li>
                    <li class="cnttopli font20"
                        :class="{liactive:currentType=='liveRanking'}"
                        @click="changeCurrentTab('liveRanking')">
                        直播排行
                    </li>
                </div>
                <!--搜索-->
                <div class="cntsearch">
                    <input type="text" class="font16" placeholder="输入教室名或教室ID号" v-model="searchInfo">
                    <span class="cntsearchimg"><img src="imgs/icon_search.png" alt="" class="select-input-icon"></span>
                </div>
                <!-- 课程按年级、科目小标签筛选 -->
                <div class="cntclsfy">
                    <div class="cntclsfygrd">
                        <span class="cntclsfygrdtag font14">按年级:</span>
                        <ul class="cntclsfygrdul">
                            <li
                                class="font14"
                                :class="{cntclsfygrdulli:currentGrade==grade.id}"
                                :data-id="grade.id"
                                v-for="(grade,index) in gradeList"
                                :key="index"
                                @click="filters(grade.id)">
                                {{grade.title}}
                            </li>
                        </ul>
                    </div>
                    <div class="cntclsfygrd">
                        <span class="cntclsfygrdtag">按科目:</span>
                        <ul class="cntclsfygrdul">
                            <li
                                class="font14"
                                :class="{cntclsfygrdulli:currentsubject==subject.id}"
                                :data-id="subject.id"
                                v-for="(subject,index) in subjectList"
                                :key="index"
                                @click="filterss(subject.id)">
                                {{subject.title}}
                            </li>
                        </ul>
                    </div>
                </div>
                <!--课程列表-->
                <div class="class">
                    <div>
                        <ul class="classall">
                            <li
                                class="classall-li font16"
                                :class= "{ 'classall-active' : currentOrder == 'composeSort' }"
                                @click="classallChange('composeSort')">
                                综合排序
                            </li>
                            <li
                                class="classall-li font16"
                                :class= "{ 'classall-active' : currentOrder == 'dateSort' }"
                                @click="classallChange('dateSort')">
                                最新
                            </li>
                            <li
                                class="classall-li font16"
                                :class= "{ 'classall-active' : currentOrder == 'hotSort' }"
                                @click="classallChange('hotSort')">
                                热门
                            </li>
                            <li
                                class="classall-li font16"
                                :class= "{  'classall-active' : currentOrder == 'priceSort' }"
                                @click="classallChange('priceSort')">
                                价格
                            </li>
                        </ul>
                    </div>
                    <div class="classc">
                        <div class="classcdiv">
                           <section class="class-title">
                              <span class="class-tag">语</span>
                              <a href="javascript:void(0)" class="ellipsis font20"> 直播小学语文直播兴趣培养，直播小学语文</a>
                           </section>
                           <section class="class-teacher">
                               <div class="class-teacher-img">
                                  <a href="javascript:void(0)">
                                    <img src="imgs/img_1.png" alt="">
                                  </a>
                                </div>
                               <div class="class-teacher-info-wrap">
                                   <div class="class-teacher-info-top font16">
                                        <a href="javascript:void(0)">
                                            <span class="class-teacher-school">关山中学</span>
                                            <span class="class-teacher-name">魏坤</span>
                                            <span class="class-teacher-famous"><img src="imgs/icon_Famous teacher.png" alt=""></span>
                                        </a>
                                    </div>
                                    <div class="class-teacher-info-btm ellipsis">
                                        资深课程设计师，专注10年AaaaAa 资深课程设计师，专注10年AaaaAa 资深课程设计师，专注10年AaaaAa
                                    </div>
                               </div>
                           </section>

                           <section class="class-info">
                               <div class="class-info-left">
                                 <a href="javascript:void(0)">
                                    <div class="class-img"><img src="imgs/img_2.png" alt=""></div>
                                    <div class="class-num">3500000</div>
                                 </a>
                               </div>
                               <div class="class-info-right">
                                   <div class="class-info-content any-line-ellipsis">
                                        <a href="javascript:void(0)">
                                                像我这样优秀的人，本该灿烂过一生，怎么二十多年到头来，还在人海里浮沉；像我这样聪明的人像我这样优秀的人，本该灿烂过一生，怎么二十多年到头来，还在人海里浮沉；像我这样聪明的人
                                        </a>
                                   </div>
                                   <div class="class-info-date">
                                        2019/04/10  16:00开始
                                   </div>
                               </div>
                            </section>
                            <section class="class-status">

                               <div class="class-price">
                                    ¥8.00
                               </div>

                               <div class="class-status-right-info">
                                    <div class="class-status-content living">
                                        正在直播
                                    </div>
                                    <div class="class-buy-num">
                                        18人
                                    </div>
                                    <div class="class-viewed-num">
                                        50人
                                    </div>
                               </div>

                            </section>
                        </div>
                        <no-data v-if="beingLiveList.length==0"></no-data>
                    </div>
                </div>

                <!-- 分页-->
                <pagination :total="totalLen" :prepage="pageStep" :show-page="5"  v-model="sPage"></pagination>
            </div>
        </div>
        <!--内容区结束-->
        <!--尾部-->
        <my-footer></my-footer>
        <!--尾部结束-->
    </div>
    <!--使用vue渲染页面-->
    <script src="js/vue.development.js"></script>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/element-ui.js"></script>
    <script src="js/js.cookie.js"></script>
    <!--用于模拟接口，上线后注释-->
    <script src="js/mock.js"></script>
    <!--用于模拟接口，上线后注释-->
    <script src="data/api.js"></script>
    <script src="js/component.js"></script>
    <script>

        Vue.component('no-data', {
            template: '<div class="nodata">暂无直播</div>'
        });

        var subList = new Vue({
            el: "#app",
            name: '视频直播列表',
            data: function () {
                return {
                    currentType:'living',
                    currentOrder: 'composeSort',//排序方式。默认综合排序
                    currentGrade: '',//当前年级
                    currentsubject: '',//当前类目
                    searchInfo:"",
                    gradeList: [],
                    subjectList: [],
                    isLogin: false, //用户是否登录过
                    loginuserInfo: {}, //登录的用户信息
                    beingLiveList: [], // beingLiveList为本地数据
                    totalLen:0,// 共有多少条数据
                    pageStep:12, // 一页展示多少条数据
                    sPage:1 // 当前活动的页码是多少
                }
            },
            created: function () {
                this.getLabelInfo();
                // this.getListInfo();
                if (this.$Cookies.get("userId") && this.$Cookies.get("userInfo")) {
                    this.loginuserInfo = this.$Cookies.get("userInfo");
                    this.isLogin = true;
                } else {
                    this.isLogin = false;
                }
            },
            methods: {
                // 点击直播分类回调
                changeCurrentTab: function (currentTab) {
                    this.currentType = currentTab;
                    this.getListInfo();
                    this.currentGrade = this.gradeList[0].id;
                    this.currentsubject = this.subjectList[0].id;
                },
                // 获取标签
                getLabelInfo: function () {
                    axios.post('http://localhost/streamLive/getStreamLiveLabels').then(this.getLabelInfoSucc);
                },
                // 标签数据获取后回调
                getLabelInfoSucc: function (res) {

                    if (res.status == 200 && res.data) {
                        res = res.data ;
                        // console.log(res);
                        if (res.status) {
                            var gradeAll = [{ id: '', name: '全部' }];
                            var subjectAll = [{ id: '', name: '全部' }];
                            this.gradeList = res.data.gradeList;       //年级中添加全部
                            this.subjectList = res.data.subjectList;    //科目中添加全部
                            this.currentGrade = this.gradeList[0].id;
                            this.currentsubject = this.subjectList[0].id;
                            this.getListInfo();
                        } else {
                            alert(res.msg);
                        }



                    }
                },
                //获取教室数据
                getListInfo: function () {
                    var parmas = {
                        "searchType" : this.currentType,
                        "gradeId" : this.currentGrade,
                        "subjectId" : this.currentsubject,
                        "roomInfo" : this.searchInfo,
                        "pageIndex" : this.sPage,
                        "pageSize" : 12,
                        "sortField" : this.currentOrder,
                        "sortType" : "desc"
                    }
                    axios.post('http://localhost/streamLive/getStreamLiveList',parmas).then(this.getListInfoSucc)
                },
                // 课程数据获取后回调
                getListInfoSucc: function (res) {

                    if (res.status == 200 && res.data) {

                        console.log(res);

                        // res = eval('(' + res.data + ')');
                        // if (res.resultCode == "0000") {
                        //     this.beingLiveList = res.result.livelist;
                        //     this.totalLen = this.beingLiveList.length;
                        // } else {
                        //     alert("resultCode错误");
                        // }


                    }
                },
                // 点击年级筛选回调
                filters: function (num) {
                    this.currentGrade = num;
                    this.getListInfo();
                },
                // 点击科目筛选回调
                filterss: function (num) {
                    this.currentsubject = num;
                    // 需要重置防止翻页导致startnum和endnum不一致
                    this.startnum = 0;
                    this.endnum = 1;
                    this.getListInfo();
                },
                // 跳转详情页
                toDetail: function (value) {
                    window.location.href = "livingDetail.html?id=" + value;
                },
                // 排序回调
                classallChange: function (orderType) { //orderType代表排序方式， orderType:1=>综合排序，orderType:2=>最新，orderType:3=>热门, orderType:4=>价格

                    //...发送排序方式到排序接口获取新的数据渲染分页列表beingLiveList
                    // console.log(orderType);
                    this.currentOrder = orderType;
                    console.log(this.currentOrder)
                }
            }
        });
        // subList.fenye();
    </script>
</body>
</html>
